import React from 'react'
import {connect,} from 'react-redux'
import LocalStorageService from "../../../../utils/LocalStorageService"
import {GameDataArrayToObject, GameDataObjectFinalized} from "../../../../redux/game";
import FootballGameCard from "../../../../shared-components/FootballGameCard/FootballGameCard";
import DateMonsterBtn from "../../DateMonsterBtn/DateMonsterBtn";
import {compareDateString, formatDate, handleDateChange} from "../../../../utils/dateService";
import {Icon} from "antd-mobile";
import NoDataPage from "../NoDataPage/NoDataPage";
import EmptyStar from "../../../../res/images/web/game-room/星形@2x.png"


class MarkedGame extends React.Component {
    constructor(props) {
        super(props)
        this.fs = 'follow_games'
        this.storage = LocalStorageService
        this.state = {
            height: document.documentElement.clientHeight - 48 - 43.5 - 50,
        }
    }

    componentDidMount() {
        const storage = this.storage
        let login = storage.get('isLogin')
        if (login) {
            this.fetchMatchList()
            this.fetchMarkList()
        }
    }

    fetchMarkList = () => {
        const list = this.props.game.markList
        if (list.length === 0) {
            const uid = this.storage.get('userid')
            this.props.doFetchMarkList({
                uid,
            })
        }
    }

    fetchMatchList = () => {
        let today = this.props.game.today
        const follows = this.storage.get(this.fs)
        const entries = follows ? Object.entries(follows) : [
            today,
            formatDate(handleDateChange(today, 1)),
            formatDate(handleDateChange(today, 2)),
            formatDate(handleDateChange(today, 3)),
        ]
        if (follows) {
            entries.map(entry => {
                let date = entry[0]
                let games = entry[1]
                let today = this.props.game.today
                let dateGames = this.props.game.games[date]
                if (dateGames === undefined && compareDateString(date, today) >= 0 && games.length > 0) {
                    if (games.every(game => Object.keys(game).length <= 1)) {
                        this.props.doFetchGameListAll({date, toast: false,},)
                    }
                }
            })
        } else {
            entries.map(entry => {
                let date = entry
                this.props.doFetchGameListAll({date, toast: false,},)
            })
        }

    }

    render() {

        const plsMark = <>
            <NoDataPage text='没有任何数据呀'/>
            <div style={{textAlign: 'center', marginTop: '8px'}}>
                <span style={{
                    fontSize:12,
                    fontWeight: '400',
                    color: 'rgba(134,134,134,1)',
                    lineHeight: '17px',
                }}>点击比赛详情页的‘</span>
                <img alt='' src={EmptyStar} style={{width: 17, height: 16,}}/>
                <span style={{
                    fontSize:12,
                    fontWeight: '400',
                    color: 'rgba(134,134,134,1)',
                    lineHeight: '17px',
                }}>’可关注比赛哟</span>
            </div>
        </>

        const login = LocalStorageService.get('isLogin')
        if (!login) {
            return plsMark
        }

        let today = this.props.game.today
        let reduxGames = this.props.game.games
        const {teams, events, stages, matches,} = reduxGames[today]

        const follows = this.storage.get(this.fs)

        const entries = follows && Object.entries(follows)
        const noMarks = entries.every(e => e[1].length === 0)
        const afterTodayNoMarks = entries.slice(3).every(e => e[1].length === 0)
        if (noMarks || afterTodayNoMarks) return plsMark
        // if (entries.)
        const todayMarks = matches.filter(match => {

            let id = match[0]
            if (follows) {
                for (let i = 0; i < follows[today].length; i++) {
                    let game = follows[today][i]
                    if (id === Number(game.matchId)) {
                        return true
                    }
                }
            }

            return false
        })

        const todayMarksOnLive = todayMarks.filter(match => match[2] < 8)
        const todayMarksEnded = todayMarks.filter(match => match[2] >= 8)
        const todayGames = (games) => {
            return <>
                {games.map(gameArr => {
                    const gameObjInit = GameDataArrayToObject(gameArr)
                    const gameObjFinal = GameDataObjectFinalized(gameObjInit, teams, events, stages)
                    return <FootballGameCard game={gameObjFinal} key={gameObjFinal.matchId}/>
                })}
            </>
        }

        const template = entries?.map(entry => {
            let date = entry[0]
            let games = entry[1]
            let today = this.props.game.today
            let dateGames = this.props.game.games[date]

            // if (dateGames === undefined && compareDateString(date, today) >= 0) {
            //     this.props.doFetchGameListAll({date, toast: false,},)
            // }
            // console.log(dataGames)

            if (compareDateString(date, today) >= 0) {
                let dateTemplate = null
                if (today !== date) {
                    if (games.length > 0) {
                        dateTemplate = <DateMonsterBtn date={date}>{date}</DateMonsterBtn>
                    }
                }
                return <div key={date} style={{backgroundColor: 'rgba(248,248,248,1)',}}>
                    {dateTemplate}
                    {today === date
                        ? todayGames(todayMarksOnLive)
                        : games.map(game => {
                            const keys = Object.keys(game)
                            if (keys.length > 1) {
                                return <FootballGameCard game={game} key={game.matchId}/>
                            } else {

                                if (dateGames) {
                                    let matchId = game.matchId
                                    let {teams, events, stages, matches,} = dateGames
                                    let i = matches.findIndex(match => match[0] === matchId)
                                    if (i > -1) {
                                        const gameObjInit = GameDataArrayToObject(matches[i])
                                        const gameObjFinal = GameDataObjectFinalized(gameObjInit, teams, events, stages)
                                        return <FootballGameCard game={gameObjFinal} key={gameObjFinal.matchId}/>
                                    }
                                } else {
                                    return <div style={{
                                        width: '100%',
                                        textAlign: 'center',
                                    }} key={game.matchId}><Icon type='loading'/></div>
                                }
                            }
                        })
                        // : null
                    }
                </div>
            }

        })

        const endT = todayMarksEnded.length > 0
            ? <>
                <div style={{
                    height: '24px',
                    width: '100%',
                    top: 0,
                    background: '#EAEAEA',
                    textAlign: 'center',
                    // position: 'fixed',
                    // top: 88.5,
                    // left: 0,
                    zIndex: 2,
                }}>
                    <span style={{lineHeight: '24px',}}>已结束</span>
                </div>
                {todayGames(todayMarksEnded)}
            </>
            : null


        return <div className='game-list-ctn'>
            {template}
            {endT}
        </div>

        // const games = this.props.game.games
        // const today = this.props.game.today
        // const {teams, events, stages, matches,} = games[today]

    }
}

const mapState = (state) => ({

    game: state.game,

})

const mapDispatch = (dispatch) => ({

    doFetchGameListAll: (payload) => dispatch.game.doFetchGameListAll(payload),

})

export default connect(mapState, mapDispatch)(MarkedGame)
